<template>
    <div class="box box9" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
        <!-- <ImmersiveNavbar title="眨眨眼" /> -->
        <div @click="goToBox7" class="image-1"></div>
        <img @click="goToBox10" class="image" :src="bgImg" alt="">
        <div class="footer" @click="add">
            <img class="footer1" :src="image" alt="">
        </div>

        <!-- <div v-show="!isHidden" class="footer2"></div> -->
    </div>
</template>
<script setup>
import { onMounted } from 'vue'
import { StorageUtils } from '@/utils/storage.js'

onMounted(() => {
    StorageUtils.setData('box9_seen', true)
})

</script>

<script>

export default {
    /* global plus */
    name: 'BoxNine',
    data() {
        return {
            // 20250707144827.jpg  0-other.jpg
            isHidden: false,
            bgImg: require('@/assets/img/box9.jpg'),
            image: require('@/assets/img/10_foot.png'),
            startX: 0,
            startY: 0
        }
    },
    created() {
        // 进入页面时判断参数
        if (this.$route.query.name === 'example') {

            this.isHidden = true
        } else {
            this.isHidden = false
        }
    },
    activated() {
        // keep-alive 时也判断
        if (this.$route.query.name === 'example') {
            this.isHidden = true
        } else {
            this.isHidden = false
        }
    },
    mounted() {
        if (typeof plus !== 'undefined' && plus.key) {
            plus.key.addEventListener('backbutton', () => {
                // 空处理函数，禁用返回键
            });
        }
        // document.addEventListener('plusready', this.handleBackButton);
        // 设置沉浸式状态栏：深色文字、浅色背景
        this.setStatusBarDark()
        document.addEventListener('plusready', this.handlePlusReady)
    },
    methods: {
        handlePlusReady() {
            this.setStatusBarDark()
        },
        setStatusBarDark() {
            if (typeof plus !== 'undefined' && plus.navigator) {
                try {
                    plus.navigator.setStatusBarStyle('dark')
                    plus.navigator.setStatusBarBackground('#ffffff')
                } catch (e) { console.warn('Box9 setStatusBarDark failed', e) }
            }
        },
        restoreStatusBarDefault() {
            if (typeof plus !== 'undefined' && plus.navigator) {
                try {
                    plus.navigator.setStatusBarStyle('light')
                    plus.navigator.setStatusBarBackground('#00000000')
                } catch (e) { console.warn('Box9 restoreStatusBarDefault failed', e) }
            }
        },
        // handleBackButton() {
        //     if (typeof plus !== 'undefined' && plus.key) {
        //         plus.key.addEventListener('backbutton', () => {
        //             if (this.$route.path !== '/box1') {
        //                 this.$router.push('/box8');
        //             } else {
        //                 if (confirm('再按一次退出应用')) {
        //                     plus.runtime.quit();
        //                 }
        //             }
        //         });
        //     }
        // },
        goToBox7() {
            this.$router.push('/box6')
        },
        goToBox10() {
            this.$router.push('/box11')
        },
        add() {
            localStorage.setItem('box9_clicked', 'true')
            this.$router.push('/box11')
        },
        handleTouchStart(e) {
            this.startX = e.touches[0].clientX
            this.startY = e.touches[0].clientY
        },
        handleTouchEnd(e) {
            const endX = e.changedTouches[0].clientX
            const endY = e.changedTouches[0].clientY
            const deltaX = endX - this.startX
            const deltaY = endY - this.startY
            if (Math.abs(deltaX) > 50 && Math.abs(deltaY) < 30) {
                if (deltaX > 0) {
                    this.goPrev()
                } else {
                    this.goNext()
                }
            }
        },
        goPrev() {
            this.$router.push('/box6')
        },
        goNext() {
            // this.$router.push('/box13')
        }
    },
    beforeUnmount() {
        // document.removeEventListener('plusready', this.handleBackButton);
        document.removeEventListener('plusready', this.handlePlusReady);
        this.restoreStatusBarDefault()
    }
}
</script>

<style scoped>
.footer2 {
    position: absolute;
    left: 0;
    bottom: 176px;
    width: 370px;
    height: 111px;
    background-color: #ffffff;
    margin: 0 auto;
}

.footer1 {
    width: 100vw;
    height: auto;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
}

.box {
    width: 375px;
    height: 100vh;
    position: absolute;
    overflow: auto;
    background: #fff;
    overflow: hidden;
}

.image {
    width: 375px;
    transform: translateY(-20px);
}

.image-1 {
    position: absolute;
    width: 30px;
    height: 30px;
    /* background-color: pink; */
    opacity: 0.1;
    top: 31px;
    left: 15px;
    z-index: 99;
}
</style>